<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <!-- 
            几个注意点：
						1.Vue实例和容器是一一对应的，真实开发中一定只有一个Vue实例，且真实开发中会配合组件一起使用。
						2.data中的数据只要发生改变，模板中用到该数据的地方，就会自动更新。
						3.{{xxx}}中的xxx要写js表达式，且xxx可以直接读取到data中配置的所有属性。

						注意区分【js表达式】与【js语句（代码）】
									1.表达式：会产生一个值，可以放在任何一个需要值的地方
												(1).100
												(2).a
												(3).demo()
												(4).x === y ? 1 : 0
												(5). 200 - 2
												(6). arr.map()
									2.语句（代码）: 不会产生值，只是控制代码走向
												(1). if(){}
												(2). for(){}
												(3). try{} catch(err){}
												等等.....
         -->
        <h1>hello,{{name}}</h1>
        <p>章节:{{p}}</p>
    </div>
    <script>
        Vue.config.productionTip = false;
      
        new Vue({
            el:'#demo',
            data:{
                name:'尚硅谷',
                p:1
            }
        })
    </script>
</body>
</html>